import React, { useContext, useState } from 'react';


import cls from 'classnames';

import { IDictionaryTitle } from '@/pages/SystemController/DictionaryTreeController/type';

import { PlusCircleOutlined } from '@ant-design/icons';

import { TypographyTitle } from '@/components/Typography';

import { DictionaryContext } from '@/pages/SystemController/DictionaryTreeController/hooks';

import { DictionaryTypeAdd } from '@/pages/SystemController/DictionaryTreeController/components/DictionaryTypeAdd';

export const DictionaryTypeTitle: React.FC<IDictionaryTitle> = ({
  reloadTree,
}) => {
  const { prefixCls } = useContext(DictionaryContext);

  const [showAppendType, setShowAppendType] = useState(false);

  const onOpenAppendType = () => {
    setShowAppendType(true);
  };

  const onCloseAppendType = () => {
    setShowAppendType(false);
  };

  return (
    <>
      <div className={cls(prefixCls + 'tree-header')}>
        <TypographyTitle
          level={4}
          style={{
            margin: 0,
          }}
        >
          字典类型
        </TypographyTitle>
        <div className={cls(prefixCls + 'tree-option')}>
          <a onClick={onOpenAppendType}>
            <PlusCircleOutlined style={{ fontSize: 18 }} />
          </a>
        </div>
      </div>
      {showAppendType && (
        <DictionaryTypeAdd
          onClose={onCloseAppendType}
          reloadTree={reloadTree}
        />
      )}
    </>
  );
};
